<template>
	<view class="page cp">
		<c-nav-bar :title="title" bgColor="transparent"></c-nav-bar>
		<image class="bg" src="https://i.ringzle.com/file/20240129/323bce42369f4d228d5653b8a4249095.png"></image>
		<view class="clandar_box" :style="{'height':(100)+'%','padding-top':mt+'px'}">
			<view class="clandar">
				<view class="left">
					<scroll-view class="scroll-view_H" scroll-x="true" scroll-with-animation="true" :scroll-left="scrollLeft">
						<view class="scroll-view-item_H" :id="'svih_'+index" v-for="(item,index) in clandars" :key="index" @tap="changeDate(item,index)">
							<view class="cl_item" :class="cidx===index?'active':''">
								<text>{{item.tip}}</text>
								<text v-if="cidx===index">{{item.date}}</text>
								<text v-else>{{item.day}}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="right">
					<view class="box" @tap="show = true">
						<image src="https://i.ringzle.com/file/20240220/22c60fa66a42436195849d619e93ca83.png" mode="">
						</image>
						<image src="https://i.ringzle.com/file/20240220/e7087ee5c86940909996adb83d1e1748.png" mode="">
						</image>
					</view>
					<image class="cr_bg" src="@/static/index/steamerTicket/img_wt.png" mode=""></image>
				</view>
			</view>
			<view class="content" :class="list.length==0?'content_empty':''">
				<!-- <view class="c_linetip" v-if="list.length>0&&isTy">
					由于天气原因{{item.startDate}}当天班次停运，看看其他日期吧！请您实时关注网上航班的变动情况！
				</view> -->
				<view class="c_items" v-if="list.length>0" v-for="(item,index) in list" :key="index"
					@tap.prevent="selectFlight(item,1)"
					:class="((hasLocal?item.priceAndTotalCount.totalCount:item.priceAndTotalCount.pubTotalCount)==0||item.lineState!=0)?'active':''">
					<view class="time">
						<block v-if="item.busStartTime">{{item.busStartTime}}</block>
						<block v-else>{{item.sailTime||''}}</block>
						<view class="cclp" @tap.stop="showInfo(item)" v-if="item.busStartTime">
							<text>车船联票</text>
							<image v-if="item.priceAndTotalCount.totalCount!=0"
								src="https://i.ringzle.com/file/20240318/60518164c4a140fc857972fca377151b.png"></image>
							<image v-else src="@/static/index/steamerTicket/icon_trigon_hs.png"></image>
						</view>
					</view>
					<view class="middle">
						<view class="top">
							<image src="@/static/index/steamerTicket/icon_line.jpg" mode=""></image>
							<view class="texts">
								<text>{{item.startPortName}}</text>
								<text>{{item.endPortName}}</text>
							</view>
						</view>
						<view class="cbottom">{{item.clxm}}<span v-if="item.timeMemosStr">{{item.timeMemosStr}}</span>
						</view>
					</view>
					<view class="right" v-if="item.lineState==0">
						<view class="price">
							￥<span>{{!hasLocal?item.priceAndTotalCount.minPrice:item.priceAndTotalCount.localMinPrice}}</span>
						</view>
						<text
							v-if="(hasLocal?item.priceAndTotalCount.totalCount:item.priceAndTotalCount.pubTotalCount)>0">余票{{hasLocal?item.priceAndTotalCount.totalCount:item.priceAndTotalCount.pubTotalCount}}张</text>
						<text v-else>售罄</text>
					</view>
					<view class="right_state" v-else>
						{{item.lineStateName||'未知'}}
					</view>
					<!-- <image class="ci_bg" v-if="item.lineState!=0" src="https://i.ringzle.com/file/20231120/1597892077e14be3adbdff8fd6b11a58.png"></image> -->
				</view>
				<view class="c_empty" v-if="list.length==0">
					<image src="https://i.ringzle.com/file/20240220/0484f35c6d844ea98ec822792b79b417.png"></image>
					<view class="ce_tip">暂无航班班次</view>
					<view class="ce_ssgq" v-if="isSsGq&&isNotGq">
						<view>嵊山与枸杞有大桥连通，您可选择中转路线试试！</view>
						<view>嵊山码头距枸杞码头驾车<span style="color: #FF4141;font-weight: bold;">1小时</span>左右，</view>
						<view>请您合理安排好时间</view>
					</view>
					<view class="ce_btn" v-if="isSsGq&&isNotGq" @tap="toSelectLine">智能中转路线推荐</view>
				</view>
			</view>
			<view class="bottom">
				<view class="time" @tap="clickSx(0)">
					<image src="https://i.ringzle.com/file/20240220/1fc8211ea1d04ddabc40f0dff748e618.png" mode=""
						v-if="bidx===0"></image>
					<image src="@/static/index/steamerTicket/icon_time.jpg" mode="" v-else></image>
					<text :class="bidx===0?'active':''">时间</text>
				</view>
				<view class="price" @tap="clickSx(1)">
					<image src=" https://i.ringzle.com/file/20240220/dc3cdf91bc0541b19c37cba540cb8112.png " mode=""
						v-if="bidx===1"></image>
					<image src="@/static/index/steamerTicket/icon_price.jpg" mode="" v-else></image>
					<text :class="bidx===1?'active':''">价格</text>
				</view>
				<view class="address" @tap="toPortAddress">
					<image src="@/static/index/steamerTicket/icon_navigation.jpg" mode=""></image>
					<text>港口地址</text>
				</view>
			</view>
		</view>
		<view class="v-calendar">
			<u-calendar title="选择日期" confirmDisabledText="确定" :maxDate="maxDate" :defaultDate="defaultDate" :formatter="formatter" :show="show"
				:mode="mode" @confirm="confirm" @close="close" color="#007A69" ref="calendar">
			</u-calendar>
		</view>
		<view class="cclp_up">
			<u-popup :show="cclpShow" @close="cclpShow=false">
				<view class="cclp_info">
					<view class="ci_title">
						<text>车船联票</text>
						<image src="@/static/index/steamerTicket/icon_close.png" @tap="cclpShow=false"></image>
					</view>
					<view class="ci_tip">路线：汽车大巴+客船</view>
					<view class="ci_box">
						<view class="cib_item">{{cclpInfo.busStartTime}}开车 {{cclpInfo.startPortName}}
							<image src="https://i.ringzle.com/file/20240307/dc715e8e47ce49649067a9554c0c92e1.png"></image>
						</view>
						<view class="cib_item">{{cclpInfo.sailTime}}开船 {{cclpInfo.embarkPortName}}
							<image src="https://i.ringzle.com/file/20240307/ab80e33c11da46dbacd6361a0e537de2.png"></image>
							<span>到达港口的时间因路况、车况的不同会有变动，仅供您参考</span>
						</view>
						<view class="cib_item">{{cclpInfo.endPortName}}
							<image src="https://i.ringzle.com/file/20240307/a9cf3df09f9a4a1f93e4dbe432089e25.png"></image>
						</view>
					</view>
					<view class="ci_btn" @tap="cclpShow=false">我知道了</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	var maxQueryDayNum = '';
	import customNavBar1 from '@/compoments/uNavBar1/index2.vue'
	export default {
		components: {
			customNavBar1
		},
		name: 'selectFlight',
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight - 60,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				show: false,
				mode: 'single',
				weeks: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
				cidx: 0,
				bidx: '',
				clandars: [],
				defaultDate: '',
				list: [],
				item: null,
				carship: false,
				hasLocal: false, //是否包含本地人
				type: '',
				title: '',
				isSsGq: false, //出发地或者目的地是否为嵊山或枸杞
				isTy: false, //是否停运
				isNotGq: true, //是否不是改签
				// lineStateCfg:{0:'正常',1:'停航',2:'停售',3:'大雾待定',4:'大风停售',5:'大风待定',6:'待定',10:'停售灾备'}
				cclpShow:false,
				cclpInfo:null,
				portCfg:{
					'1010':{lng:122.425225,lat:30.738996,title:'李柱山码头',address:'浙江省舟山市嵊泗县李五线嵊泗列岛风景名胜区',telphone:'(0580)5078323/(0580)5083723'},
					'1011':{lng:122.425225,lat:30.738996,title:'李柱山码头',address:'浙江省舟山市嵊泗县李五线嵊泗列岛风景名胜区',telphone:'(0580)5078323/(0580)5083723'},
					'1012':{lng:122.465182,lat:30.729425,title:'小菜园客运码头',address:'浙江省舟山市嵊泗县海滨东路265号',telphone:'(0580)5070342'},
					'1013':{lng:122.699829,lat:30.846601,title:'嵊泗(绿华)',address:'浙江省舟山市嵊泗县花鸟岛内(东侧)',telphone:'(0580)5596999'},
					'1014':{lng:122.699829,lat:30.846601,title:'花鸟客运码头',address:'浙江省舟山市嵊泗县花鸟岛内(东侧)',telphone:'(0580)5596999'},
					'1015':{lng:122.699829,lat:30.846601,title:'嵊泗(毕下)',address:'浙江省舟山市嵊泗县花鸟岛内(东侧)',telphone:'(0580)5596999'},
					'1016':{lng:122.80995,lat:30.724053,title:'嵊山北码头',address:'浙江省舟山市嵊泗县嵊山枸杞景区内(东侧)',telphone:''},
					'1017':{lng:122.757875,lat:30.708894,title:'枸杞岛干斜码头',address:'浙江省舟山市嵊泗县轧轧洞',telphone:''},
					'1018':{lng:122.092689,lat:30.591915,title:'大洋站码头',address:'浙江省舟山市嵊泗县大洋镇后门村',telphone:''},
					'1019':{lng:122.52484,lat:30.70048,title:'五龙',address:'浙江省舟山市嵊泗县沿边路73号附近',telphone:''},
					'1020':{lng:122.229553,lat:30.241081,title:'岱山竹屿码头',address:'浙江省舟山市岱山县526国道与采霞路交叉口东140米',telphone:''},
					'1022':{lng:122.118523,lat:30.138428,title:'舟山三江码头',address:'浙江省舟山市定海区马岙镇定马线',telphone:'(0580)8081001'},
					'1027':{lng:122.371892,lat:29.951295,title:'朱家尖蜈蚣峙码头',address:'浙江省舟山市普陀区朱家尖镇普渡路4号',telphone:'(0580)3889090'},
					'1028':{lng:122.134244,lat:30.600722,title:'沈家湾客运码头',address:'浙江省舟山市嵊泗县洋山深水港东端',telphone:'(0580)5298323'},
					'1030':{lng:122.285296,lat:30.433887,title:'衢山客运中心',address:'浙江省舟山市岱山县蓬莱路91号',telphone:'(0580)4372611'},
					'1031':{lng:122.177286,lat:30.342718,title:'燕窝山客运中心',address:'浙江省舟山市岱山县燕窝山码头',telphone:''},
					'1034':{lng:122.55166,lat:30.665056,title:'黄龙码头',address:'浙江省舟山市嵊泗县',telphone:''},
					'1036':{lng:121.317611,lat:31.194301,title:'上海长途客运虹桥站',address:'上海市闵行区申虹路298号',telphone:'(021)51245555'},
					'1041':{lng:121.53371,lat:29.861731,title:'宁波汽车南站',address:'浙江省宁波市海曙区甬水桥路408号',telphone:'(0574)87133561'},
					'1046':{lng:121.501345,lat:31.208135,title:'上海南浦旅游集散中心',address:'上海市黄浦区外马路1588号',telphone:'4008872626'},
					'1053':{lng:122.216957,lat:30.255614,title:'岱山县长途客运中心',address:'浙江省舟山市岱山县衢山大道999号',telphone:'(0580)4472521'},
					'1054':{lng:122.099067,lat:30.297928,title:'岱山旅游集散中心',address:'岱山520路,岱山502路,岱山501路',telphone:''}
				},
				maxDate:'',
				scrollLeft:0
			}
		},
		onReady() {
			this.$refs.calendar.setFormatter(this.formatter);
			// if(uni.getStorageSync('shipType')&&uni.getStorageSync('shipType')==2) this.carship = true;
		},
		onLoad(options) {
			if (options.item) {
				this.item = JSON.parse(options.item);
				this.title = this.item.from + ' - ' + this.item.to;
				if (options.type && options.type == 'changeTicket' && uni.getStorageSync('change_ticket_info')) {
					this.type = options.type;
					this.isNotGq = false;
					this.getChangeTicketList(this.item.startDate, JSON.parse(uni.getStorageSync('change_ticket_info'))
						.orderDetailId);
				} else this.getList(this.item);
				if (this.item.from.indexOf('上海') > -1) this.carship = true;
			}
			this.getMaxDate();
			this.getIsLocal();
		},
		methods: {
			getMaxDate() {
				this.$api.get('/travel/isshipsaleconfig/page').then(res => {
					if (res.data.code === 0) {
						if (res.data.data.list.length > 0) {
							maxQueryDayNum = res.data.data.list[0].wysts;
							this.maxDate = new Date(new Date().setDate(new Date().getDate() + (+maxQueryDayNum))).Format('yyyy-MM-dd');
							this.initClandar(maxQueryDayNum);
						}
					} else this.$showModal(res.data.msg);
				})
			},
			getIsLocal() {
				if (!uni.getStorageSync('userInfo')) return
				this.$api.get('/api/commonPerson/isLocalCount', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					isLocal: 1
				}).then(res => {
					if (res.data.code === 0) {
						this.hasLocal = res.data.data > 0 ? true : false;
					} else this.$showModal(res.data.msg);
				})
			},
			initClandar(maxQueryDayNum) {
				for (let i = 0; i <= maxQueryDayNum; i++) {
					this.clandars.push({
						tip: i == 0 ? '今天' : (i == 1 ? '明天' : (this.weeks[new Date(new Date().setDate(new Date()
							.getDate() + i)).getDay()])),
						date: new Date(new Date().setDate(new Date().getDate() + i)).Format('MM-dd'),
						day: new Date(new Date().setDate(new Date().getDate() + i)).Format('dd'),
						nyr: new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd')
					})
				}
				this.defaultDate = this.item.startDate;
				let fidx = this.clandars.findIndex(d => d.nyr == this.item.startDate);
				this.cidx = fidx == -1 ? '' : fidx;
			},
			getList(item) {
				this.$api.get('/travel/isshipport/pageLineAll', {
					startPortNo: item.startPortNo,
					endPortNo: item.endPortNo,
					startDate: item.startDate,
					pzlx: item.pzlx
				}).then(res => {
					if (res.data.code === 0) {
						this.list = res.data.data || [];
						let tyNum = this.list.filter(l=>l.lineState!=0);
						if(tyNum==this.list.length) this.isTy = true;
						this.isEmpty(item.from, item.to, this.list);
					} else this.$showModal(res.data.msg)
				})
			},
			getChangeTicketList(startDate, orderDetailId) {
				this.$api.get('/api/travel/isshipport/alertLine', {
					orderDetailId,
					startDate
				}).then(res => {
					if (res.data.code === 0) {
						this.list = res.data.data || [];
						let tyNum = this.list.filter(l=>l.lineState!=0);
						if(tyNum==this.list.length) this.isTy = true;
						this.isEmpty(this.item.from, this.item.to, this.list);
					} else this.$showModal(res.data.msg)
				})
			},
			//空数据时处理
			isEmpty(from, to, list) {
				if (list.length == 0) {
					// if((from.indexOf('嵊山')>-1&&to.indexOf('枸杞')>-1)||(from.indexOf('枸杞')>-1&&to.indexOf('嵊山')>-1)) return;
					if ((from.indexOf('嵊山') > -1 || from.indexOf('枸杞') > -1) || (to.indexOf('嵊山') > -1 || to.indexOf(
							'枸杞') > -1)) this.isSsGq = true;
					else this.isSsGq = false;
				}
			},
			//智能推荐中转路线
			toSelectLine() {
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/selectShipRoute?type=1',
					events: {
						selectedShip: data => {
							this.item.startPortNo = data.fromCode;
							this.item.endPortNo = data.toCode;
							this.item.from = data.from;
							this.item.to = data.to;
							this.title = data.from + ' - ' + data.to;
							this.getList(this.item);
						}
					}
				})
			},
			changeDate(item, index) {
				this.cidx = index;
				this.item.startDate = this.clandars[index].nyr;
				this.defaultDate = this.item.startDate;

				if (this.type == 'changeTicket' && uni.getStorageSync('change_ticket_info')) {
					this.getChangeTicketList(this.item.startDate, JSON.parse(uni.getStorageSync('change_ticket_info'))
						.orderDetailId);
				} else this.getList(this.item);
			},
			clickSx(type) {
				this.bidx = type;
				this.list.sort((a, b) => {
					if (type === 0) {
						let t1 = new Date(new Date().Format('yyyy-MM-dd hh:') + a.sailTime).getTime();
						let t2 = new Date(new Date().Format('yyyy-MM-dd hh:') + b.sailTime).getTime();
						return t1 - t2
					}
					if (type === 1) return a.priceAndTotalCount.minPrice - b.priceAndTotalCount.minPrice;
				})
			},
			toPortAddress() {
				let departPort = this.portCfg[this.item.startPortNo]||'';
				let arrivePort = this.portCfg[this.item.endPortNo]||'';
				if(!departPort&&!arrivePort) return this.$showToast('暂无港口地址');
				uni.navigateTo({
					url: '/pagesIndex/steamerTicket/portAddress?departPort=' + JSON.stringify(departPort) + "&arrivePort=" + JSON.stringify(arrivePort)
				})
			},
			confirm(e) {
				this.show = false;
				this.item.startDate = new Date(e[0]).Format('yyyy-MM-dd');
				let fidx = this.clandars.findIndex(d => d.nyr == this.item.startDate);
				this.cidx = fidx == -1 ? '' : fidx;

				if (this.type == 'changeTicket' && uni.getStorageSync('change_ticket_info')) {
					this.getChangeTicketList(this.item.startDate, JSON.parse(uni.getStorageSync('change_ticket_info'))
						.orderDetailId);
				} else this.getList(this.item);
				
				if(this.cidx>-1){
					let that = this;
					const query = uni.createSelectorQuery();
					query.select('#svih_0').fields({size:true},res=>{
						that.scrollLeft = res.width*that.cidx||0;
					}).exec()
				}
			},
			close() {
				this.show = false;
			},
			formatter(day) {
				if (maxQueryDayNum) {
					for (let i = 0; i <= maxQueryDayNum; i++) {
						let now = new Date(new Date().getFullYear() + '-' + day.month + '-' + day.day).Format(
							'yyyy-MM-dd');
						let temp = new Date(new Date().setDate(new Date().getDate() + i)).Format('yyyy-MM-dd');
						if (now == temp) {
							day.bottomInfo = '可售'
						}
					}
					return day
				}
			},
			selectFlight(item, t) {
				if (item.lineState != 0) return
				let type = '';
				if (uni.getStorageSync('shipType') == 2) type = 'ship';

				let url = '/pagesIndex/steamerTicket/confirmBooking?item=' + JSON.stringify(item) + '&type=' + type;
				if (this.type == 'changeTicket' && uni.getStorageSync('change_ticket_info')) {
					if (JSON.parse(uni.getStorageSync('change_ticket_info')).buyTicketType == 2) type = 'ship';
					else type = '';
					url = '/pagesIndex/steamerTicket/confirmBookingGq?item=' + JSON.stringify(item) + '&type=' + type;
				}
				uni.navigateTo({
					url
				});
			},
			showInfo(item){
				this.cclpShow = true;
				this.cclpInfo = item;
			}
		}
	}
</script>

<style scoped lang="less">
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	
	.scroll-view-item_H {
		display: inline-block;
		width: 102rpx;
		height: 100%;
	}
	
	::v-deep .cclp_up{
		.u-popup__content{
			 border-radius: 24rpx 24rpx 0 0;
		}
	}
	.cclp_info{
		 width: 100%;
		 padding: 40rpx 23rpx 64rpx;
		 box-sizing: border-box;
		 border-radius: 24rpx 24rpx 0 0;
		 .ci_title{
			 width: 100%;
			 display: flex;
			 align-items: center;
			 justify-content: center;
			 position: relative;
			 text{
				 font-family: PingFang-SC, PingFang-SC;
				 font-weight: bold;
				 font-size: 36rpx;
				 color: #111111;
				 line-height: 36rpx;
			 }
			 image{
				 width: 36rpx;
				 height: 36rpx;
				 position: absolute;
				 top:50%;
				 margin-top: -18rpx;
				 right: 13rpx;
			 }
		 }
		 .ci_tip{
			 margin-top: 26rpx;
			 padding-left: 9rpx;
			 font-family: PingFangSC, PingFang SC;
			 font-weight: 400;
			 font-size: 28rpx;
			 color: #333333;
			 line-height: 40rpx;
		 }
		 .ci_box{
			 width: 100%;
			 margin-top: 23rpx;
			 position: relative;
			 padding-left: 87rpx;
			 box-sizing: border-box;
			 &:before{
				 content: '';
				 width: 22rpx;
				 height: 88%;
				 background: #188FFE;
				 position: absolute;
				 left: 25rpx;
				 top: 6%;
			 }
			 .cib_item{
				 padding: 21rpx 0;
				 font-family: PingFang-SC, PingFang-SC;
				 font-weight: bold;
				 font-size: 30rpx;
				 color: #333333;
				 margin-top: 26rpx;
				 position: relative;
				 &:first-child{
					 margin-top: 0;
				 }
				 image{
					 width: 72rpx;
					 height: 72rpx;
					 position: absolute;
					 left: -88rpx;
					 top: 50%;
					 margin-top: -36rpx;
					 z-index: 2;
				 }
				 span{
					 position: absolute;
					 top: 60rpx;
					 left: 0;
					 font-family: PingFangSC, PingFang SC;
					 font-weight: 400;
					 font-size: 24rpx;
					 color: #808080;
					 line-height: 33rpx;
				 }
			 }
		 }
		 .ci_btn{
			 margin-top: 37rpx;
			 width: 100%;
			 height: 88rpx;
			 background: #007A69;
			 border-radius: 44rpx;
			 line-height: 88rpx;
			 text-align: center;
			 font-family: PingFang-SC, PingFang-SC;
			 font-weight: bold;
			 font-size: 32rpx;
			 color: #FFFFFF;
		 }
	}
	
	/deep/.u-scroll-list {
		padding-bottom: 0 !important;
	}
	/deep/.v-calendar {
		.u-icon__icon {
			font-size: 28rpx !important;
		}
	}

	.page {
		height: 100%;
		box-sizing: border-box;
		
		.bg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 468rpx;
		}

		.clandar_box {
			background: #F5F8FA;
			padding-top: 17rpx;
			overflow: auto;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 420rpx;
			box-sizing: border-box;


			.clandar {
				box-sizing: border-box;
				width: 100%;
				// height: 120rpx;
				// background: #fff;
				display: flex;
				align-items: center;
				padding: 9rpx 0 18rpx;

				.left {
					width: calc(100% - 128rpx);
					display: flex;
					align-items: center;
					padding: 15rpx;
					overflow-x: auto;

					.cl_item {
						// width: calc(100% / 6);
						width: 102rpx;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						padding: 15rpx 0;

						text {
							&:first-child {
								font-size: 22rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #373737;
								line-height: 28rpx;
							}

							&:last-child {
								font-size: 28rpx;
								font-family: SourceHanSansCN-Bold, SourceHanSansCN;
								font-weight: bold;
								color: #333333;
								line-height: 28rpx;
								margin-top: 15rpx;
							}
						}

						&.active {
							// background: linear-gradient(90deg, #0EBFFE 0%, #00D3E8 100%);
							background-color: #007A69;
							border-radius: 8rpx;

							text {
								&:first-child {
									color: #FFFFFF;
								}

								&:last-child {
									font-weight: 800;
									color: #FFFFFF;
								}
							}
						}
					}
				}

				.right {
					// background: #F5F8FA;
					padding-left: 20rpx;
					width: 128rpx;
					position: relative;

					.cr_bg {
						width: 20rpx;
						height: 120rpx;
						position: absolute;
						left: 0;
						top: -12rpx;
					}

					.box {
						padding: 15rpx 0;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						// background: #fff;

						image {
							&:first-child {
								width: 36rpx;
								height: 36rpx;
							}

							&:last-child {
								width: 24rpx;
								height: 24rpx;
								margin-top: 10rpx;
							}
						}
					}
				}
			}
		}

		.content {
			width: 100%;
			height: calc(100% - 132rpx);
			background: #F5F8FA;
			padding: 0 24rpx 24rpx;
			box-sizing: border-box;
			overflow-y: auto;
			padding-bottom: 120rpx;

			.c_items {
				background: #FFFFFF;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
				border-radius: 16rpx;
				padding: 32rpx 24rpx;
				display: flex;
				justify-content: space-around;
				position: relative;
				margin-bottom: 10rpx;

				.time {
					width: 100rpx;
					font-size: 40rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					line-height: 56rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.cclp {
						width: 124rpx;
						height: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: rgba(0, 122, 105, 0.09);
						border-radius: 4rpx;

						text {
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #007A69;
						}

						image {
							width: 10rpx;
							height: 12.5rpx;
							margin-left: 11rpx;
						}
					}
				}

				.middle {
					width: calc(100% - 260rpx);
					padding-left: 40rpx;
					box-sizing: border-box;

					.top {
						display: flex;
						align-items: center;

						&>image {
							width: 8rpx;
							height: 68rpx;
						}

						.texts {
							display: flex;
							flex-direction: column;
							padding-left: 16rpx;

							text {
								font-size: 30rpx;
								font-family: PingFang-SC-Bold, PingFang-SC;
								font-weight: bold;
								color: #333333;

								&:last-child {
									margin-top: 25rpx;
								}
							}
						}
					}

					.cbottom {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-top: 20rpx;
						padding-left: 24rpx;

						span {
							font-size: 24rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							color: #999999;
							margin-left: 10rpx;
							padding-left: 10rpx;
							position: relative;

							&::before {
								content: '';
								width: 1rpx;
								height: 20rpx;
								background: #CCCCCC;
								position: absolute;
								left: 0;
								top: 50%;
								margin-top: -10rpx;
							}
						}
					}
				}

				.right {
					width: 160rpx;
					display: flex;
					flex-direction: column;
					text-align: right;

					.price {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #FF4141;

						span {
							font-size: 40rpx;
							font-weight: bold;
						}
					}

					text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999999;
						margin-top: 10rpx;
					}
				}

				.right_state {
					width: 160rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					font-size: 40rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #AAAAAA;
					text-align: right;
				}

				&.active {

					.time,
					.price,
					.cbottom,
					text,
					span {
						color: #CCCCCC !important;
					}

					.cclp {
						background: #F6F6F6;
					}
				}

				.ci_bg {
					width: 160rpx;
					height: 106rpx;
					position: absolute;
					top: 50%;
					margin-top: -53rpx;
					right: 156rpx;
					z-index: 9;
				}
			}

			.c_linetip {
				width: calc(100% + 48rpx);
				background: #FFF5EB;
				padding: 10rpx 24rpx;
				box-sizing: border-box;
				font-size: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FF7D01;
				line-height: 30rpx;
				margin-top: 0;
				margin-left: -24rpx;
				margin-bottom: 10rpx;
				position: relative;
			}

			&.content_empty {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.c_empty {
				width: calc(100% - 32rpx);
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 0;
				background: #F5F8FA;

				image {
					width: 204rpx;
					height: 130rpx;
				}

				.ce_tip {
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #333333;
					margin-top: 48rpx;
				}

				.ce_ssgq {
					margin-top: 16rpx;

					&>view {
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #333333;
						line-height: 48rpx;
						text-align: center;
					}
				}

				.ce_btn {
					width: 100%;
					height: 88rpx;
					background: #007A69;
					box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(13, 191, 253, 0.3);
					border-radius: 44rpx;
					line-height: 88rpx;
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: bold;
					color: #FFFFFF;
					letter-spacing: 2rpx;
					margin-top: 29rpx;
				}
			}
		}

		.bottom {
			width: 100%;
			height: 110rpx;
			position: fixed;
			bottom: 0;
			background: #fff;
			display: flex;
			align-items: center;

			view {
				width: calc(100% / 3);
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 36rpx;
					height: 36rpx;
				}

				text {
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					margin-left: 10rpx;

					&.active {
						color: #007A69;
					}
				}
			}
		}
	}
</style>
<style lang="scss" scoped>
	.title {
		color: $u-primary;
		text-align: center;
		padding: 20rpx 0 0 0;
	}
</style>
<style>
	.cp .u-calendar-month__days__day {
		height: 104rpx !important;
	}

	.u-calendar__confirm .u-button {
		width: calc(100% - 24rpx) !important;
		height: 88rpx !important;
		background: #007A69 !important;
		border-radius: 44rpx !important;
	}

	.u-calendar__confirm .u-button text {
		font-size: 32rpx !important;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
	}

	.u-calendar scroll-view {
		height: 600rpx !important;
	}
</style>